<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 头部区域 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="学科名称" >
          <el-input size="mini" v-model="params.subjectName"></el-input>
        </el-form-item>
        <el-button size="mini" @click="deleteSubject">清除</el-button>
        <el-button size="mini" type="primary" @click="getSubjectsList">搜索</el-button>
      </el-form>
      <el-button type="success" class="rbtn" size="mini" icon="el-icon-edit" @click="isaddshow = true">新增学科</el-button>
      <el-alert type="info" :closable="false">
        <i class="el-icon-info"></i>
        <span>数据一共有{{ counts }}条</span>
      </el-alert>
      <!-- 头部区域 -->
      <!-- 表格区域 -->
      <el-table :data="list" style="width: 100%" minwidth="900">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="学科名称" prop="subjectName"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column width="150" prop="addDate" label="创建日期">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="isFdrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            {{ scope.row.isFdrontDisplay === 1 ? '否' : '是' }}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
          <template slot-scope="scope">
            {{ scope.row.twoLevelDirectory + ' ' }}
          </template>
        </el-table-column>
        <el-table-column prop="tags " label="标签">
          <template slot-scope="scope">
            {{ scope.row.tags + ' ' }}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="230px">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="mini" @click="godirectorys">学科分类</el-button>
              <el-button type="text" size="mini" @click="gotags">学科标签</el-button>
              <el-button type="text" size="mini" @click="modify(scope.row.subjectName,scope.row.id)">修改</el-button>
              <el-button type="text" size="mini" @click="delesubject(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格区域 -->
      <!-- 页码区域 -->
      <div class="block">
        <!-- <el-pagination :page-sizes="[3, 5, 10, 15]" :page-size="100" layout=" prev, pager, next,sizes, jumper"> </el-pagination> -->
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[3,5, 10, 20, 50]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts">
    </el-pagination>
      </div>
      <!-- 页码区域 -->
      <!-- 新增学科弹出层 -->
      <el-dialog title="新增学科" :visible.sync="isaddshow" width="340px">
        <addsubjects @add="addSubjects"  @close="isaddshow=false"/>
      </el-dialog>
      <!-- 新增学科弹出层 -->

      <!-- 修改学科弹出层 -->
      <el-dialog title="修改学科" :visible.sync="ismodifyshow" width="340px">
        <addsubjects :channe="goName" @input="addmodify"  @close="ismodifyshow=false"/>
      </el-dialog>
      <!-- /修改学科弹出层 -->
    </el-card>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/hmmm/subjects.js'
import addsubjects from '@/module-hmmm/components/subjects-add'

export default {
  components: {
    addsubjects
  },
  data () {
    return {
      params: {
        // 当前的页数
        page: 1,
        // 当前每页显示多少条
        pagesize: 10,
        subjectName: ''
      },
      list: [],
      counts: 0,
      isaddshow: false,
      ismodifyshow: false,
      goName: '',
      id: ''

    }
  },
  created () {
    this.getSubjectsList()
  },
  methods: {
    // 获取所有学科列表
    async getSubjectsList () {
      const { data } = await list(this.params)
      console.log(data)
      this.list = data.items
      this.counts = data.counts
      // console.log(this.list)
      // console.log(this.isaddshow)
    },
    godirectorys () {
      this.$router.push({ name: 'subjects-directorys' })
    },
    gotags () {
      this.$router.push({ name: 'subjects-tags' })
    },
    async addSubjects (value) {
      console.log(value)
      await add({
        subjectName: value.name,
        isFrontDisplay: +value.display
      })
      try {
        this.$message('保存成功')
        // console.log(data)
        this.isaddshow = false
      } catch (err) {
        this.$message.error('保存失败')
        this.isaddshow = false
      }
      this.isaddshow = false
    },
    modify (value, id) {
      // console.log(value, id)
      this.goName = value
      this.ismodifyshow = true
      this.id = id
    },
    async addmodify (value) {
      console.log(value)
      console.log(this.id)
      await update({
        id: this.id,
        subjectName: value.name,
        isFrontDisplay: value.display
      })
      try {
        this.$message('保存成功')
        this.ismodifyshow = false
        this.getSubjectsList()
      } catch (err) {
        this.$message.error('保存失败')
      }
      this.ismodifyshow = false
    },
    deleteSubject () {
      this.params.subjectName = ''
    },
    // 删除用户的操作
    delesubject (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const { data } = await remove({
            id: this.id
          })
          this.getSubjectsList()
          console.log(data)
        } catch (error) {
          console.log('删除失败')
        }
        this.getSubjectsList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 监听pagasize改变的事件
    handleSizeChange (newsize) {
      this.params.pagesize = newsize
      this.getSubjectsList()
    },
    // 监听页码值得改变
    handleCurrentChange (newpage) {
      console.log(newpage)
      this.params.page = newpage
      this.getSubjectsList()
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .block {
    margin-right: -100%;
  }
}
.rbtn {
  position: fixed;
  right: 20px;
  top: 130px;
}
.el-pagination{
  margin-top: 15px;
}
</style>
